<template>
  <div class="home_bg_box">
    <div class="home_warp">
      <div class="home_nav">
        <div class="logo">
          <img src="../../assets/banner/logo.png" alt="" />
          MayiGenerator
        </div>
        <div>
          <div class="nav_warp">
            <div
              class="nav"
              v-for="(item, index) in nav"
              :key="index"
              @click="onNav(item.name)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner_warp">
      <el-carousel height="572px">
        <el-carousel-item>
          <div class="banner">
            <div class="text">
              <p>
                蚂蚁表单生成器
              </p>
              <p>表单推拽快速生成代码</p>
              <p>专注于逻辑代码，远离页面代码</p>
            </div>
            <img
              src="../../assets/banner/carousel-envoyActivity.0dbb658.png"
              alt=""
              class="banner_img"
            />
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="banner">
            <div class="text">
              <p>蚂蚁页面生成器</p>

              <p>快速生成增删改查页面代码</p>
              <p>专注于逻辑代码，远离页面代码</p>
            </div>
            <img
              src="../../assets/banner/carousel-signUpGift.5566b4c.png"
              alt=""
              class="banner_img"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="introduce">
      <el-divider>特性</el-divider>

      <div class="introduce_body">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>可视化</span>
          </div>
          <div class="body">
            <img src="../../assets/banner/1.png" alt="" class="img" />
            <span>
              主流表单设计器页面，通过可视化的操作，快速完成表单页面的创建。</span
            >
          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Element</span>
          </div>
          <div class="body">
            <img src="../../assets/banner/2.png" alt="" class="img" />
            <span>
              使用基于 Vue 2.0 的桌面端组件库 Elemnet
              ，使用广泛，扩展方便。</span
            >
          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>栅格布局</span>
          </div>
          <div class="body">
            <img src="../../assets/banner/3.png" alt="" class="img" />
            <span>
              通过栅格进行表单布局，可以嵌套使用，支持
              Flex，基本可覆盖复杂的表单布局场景。</span
            >
          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>自定义</span>
          </div>
          <div class="body">
            <img src="../../assets/banner/4.png" alt="" class="img" />
            <span>
              提供自定义区域和自定义样式扩展，可以简单方便的自定义自己的表单。</span
            >
          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>高级组件</span>
          </div>
          <div class="body">
            <img src="../../assets/banner/5.png" alt="" class="img" />
            <span> 提供功能强大的高级组件，可适用在各种复杂的场景中。</span>
          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>低代码</span>
          </div>
          <div class="body">
            <img src="../../assets/banner/6.png" alt="" class="img" />
            <span
              >快速生成增删改查页面代码或者表单代码，远离页面代码样式调整。</span
            >
          </div>
        </el-card>
      </div>
    </div>
    <div class="page-join">
      <p>专注前端开发,要让代码为我们干活，不要我们为代码干活</p>
    </div>
    <div class="footer">
      <div class="footer_body">
        <p>蚂蚁代码生成器，低代码开发，提高开发效率！</p>
        <p>
          工欲善其事，必先利其器
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: [
        { title: "表单生成器", name: "FormGenerator" },
        { title: "页面生成器", name: "PageGenerator" },
        { title: "echarts生成器", name: "Echarts" },
        { title: "demo", name: "MyForm" }
      ]
    };
  },
  methods: {
    onNav(name) {
      this.$router.push({ name });
    }
  }
};
</script>

<style lang="scss" scoped>
.home_bg_box {
  // user-select: none;
  .home_warp {
    background-color: #0c121c;
    width: 100%;
    color: #fff;
    height: 60px;
    display: flex;
    justify-content: center;
    .home_nav {
      background-color: #0c121c;
      height: 100%;
      width: 1200px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;

      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        img {
          height: 45px;
        }
      }
      .nav_warp {
        display: flex;
        .nav {
          margin: 0 15px;
          cursor: pointer;
          line-height: 58px;
        }
        .nav:hover {
          border-bottom: 2px solid #2d77ee;
          color: #2d77ee;
        }
      }
    }
  }
  .banner_warp {
    width: 100%;
    text-align: center;
    height: 572px;
    background-image: url("../../assets/home.png");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    .banner {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text {
        font-size: 28px;
        color: #fff;

        font-weight: bold;
        display: flex;
        flex-direction: column;
        margin-bottom: 100px;
        p {
          margin: 20px 0;
        }
      }
      .banner_img {
        width: 700px;
        height: 575px;
      }
    }
  }
  .introduce {
    margin-top: 80px;
    .introduce_body {
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      margin-top: 60px;
      box-sizing: border-box;
      .box-card {
        margin: 25px 25px;
        width: 29%;

        .body {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          line-height: 20px;

          .img {
            width: 200px;
          }
        }
      }
    }
  }
  .page-join {
    margin-top: 200px;
    height: 300px;
    background-image: url("../../assets/banner/底部登录默认背景图.png");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    font-size: 32px;
    color: #fff;
    font-weight: bold;
    line-height: 300px;
    text-align: center;
  }
  .footer {
    height: 500px;
    background: #101724;
    .footer_body {
      width: 1185px;
      margin: 0 auto;
      height: 100%;
      font-size: 32px;
      color: #fff;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      text-align: center;
      p {
        line-height: 100px;
      }
    }
  }
}
</style>
